{extend name="public/common"/}

{block name="head"}
<style>
  body {
    background-color: #fff;
  }

  .login-img {
    margin-top: 1em;
    height: 5em;
    -moz-border-radius: 5em;
    /*  -webkit-border-radius: 5em;
    border-radius: 5em;*/
  }

  img {
    display: inline;
  }

</style>
{/block}
{block name="header"}
<header class="aui-bar aui-bar-nav" id="aui-header">
  <a class="aui-btn aui-pull-left" href="javascript:history.go(-1);">
    <span class="aui-iconfont aui-icon-left"></span>
  </a>
  <div class="aui-title">登录</div>
  <a class="aui-pull-right"  >
    <span class="aui-iconfont aui-icon-question"></span>
  </a>
</header>
	{/block}
{block name="body"}

<section class="aui-content aui-margin-t-15" style="text-align: center;margin-bottom: 2rem;">

  <img class="login-img" src="__IMG__/ren.png" style="display:initial;">

</section>
<section class="aui-content aui-margin-t-15 register-box">
  <ul class="aui-list aui-form-list">
    <li class="aui-list-item">
      <div class="aui-list-item-inner">
        <div class="aui-list-item-input">
          <input type="number" pattern="[0-9]*" placeholder="手机号" v-model="mobile" id="mobile">
        </div>
      </div>
    </li>

    <li class="aui-list-item">
      <div class="aui-list-item-inner">
        <div class="aui-list-item-input" style="width: auto;">
          <input type="number" pattern="^1[345678][0-9]{9}$" v-model="sms_code"  placeholder="短信验证码" id="sms_code">
        </div>
        <div class="aui-list-item-label aui-margin-r-15" style="width: 6rem;">
          <div onclick="getCode()" id="TencentCaptcha" class="aui-btn aui-btn-outlined" style="width: 6rem;border-radius: 2.2rem;">获取验证码</div>
          <div id="count_down"  type="button"  class="aui-btn aui-btn-outlined aui-hide" style="width: 6rem;border-radius: 2.2rem;">60</div>
        </div>
      </div>
    </li>
    <li class="aui-list-item">
      <div class="aui-list-item-inner">
        <div class="aui-list-item-input">
          <input type="text"   placeholder="昵称" v-model="nickname"  >
        </div>
      </div>
    </li>
    <li class="aui-list-item">
      <div class="aui-list-item-inner">
        <div class="aui-list-item-input" style="width: auto;">
          <input type="password" pattern="^1[3456789][0-9]{9}$"  v-model="password" id="password" placeholder="请设置密码">
        </div>
        <div class="aui-list-item-label" style="width: 6rem;">
          <i class="aui-iconfont aui-icon-display" onclick="changePwd()"></i>
        </div>
      </div>
    </li>
    <li class="aui-list-item">
      <div class="aui-list-item-inner aui-font-size-12 aui-text-center">
        密码可以是数字、英文和特殊符号
      </div>
    </li>
  </ul>
</section>

<section class="aui-content-padded">
  <div class="aui-btn aui-btn-block aui-btn-info aui-btn-sm">注册</div>
</section>
<div class="aui-font-size-16 " style="margin-top: 1.2rem;">
  <div class="aui-info-item" style="text-align:center;display: block;">已有账号，马上<a style="display: -webkit-inline-box;font-weight:800;" href="{:url('mobile/Foreign/login')}">登录</a></div>
</div>
<div class="aui-font-size-12  aui-text-center" style="margin-top:3rem;">
  <!--<input class="aui-switch " style="height:0.8rem;width:1.5rem;" type="checkbox" name="checkbox" checked="1"> -->
  注册即表示你同意
  <a href="javascript:void(0);" >《用户服务协议》</a>和<a href="javascript:void(0);">《平台规则》</a>
</div>


{/block}
{block name="script"}

<script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
<script>

  var register_dom = new Vue({
    el : '.register-box',
    data : {
      password : "",
      sms_code:"",
      mobile : '',
      nickname:'',
    },
    methods : {

    },
    //更新
    updated : function() {
      console.log();
    }
  });
  function getCode() {
    if (!register_dom.mobile) {
      $api.dom('#mobile').focus();
      toast.fail({
        title:'请输入手机号',
        duration:2000
      });
    } else {
      if({:config('setting.tencent_captcha_open')})
      {
        var captcha1 = new TencentCaptcha("{:config('setting.tencent_captcha_appid')}", function(res) {
          if (res.ret === 0) {
              getSmsCode(res);
          }
        });
        captcha1.show(); // 显示验证码
      }else{
        getSmsCode({});
      }
  }
  function  getSmsCode(res) {
      res['mobile'] = register_dom.mobile;
      res['type'] = 'register';
      $.ajax({
        type : 'post',
        url : "{:url('ucenter/Foreign/sms')}",
        data : res,
        dataType : 'json',
        timeout : 3000,
        success : function(data) {
          toast.hide();
          if (0 == data.code) {
            $("#TencentCaptcha").addClass('aui-hide');
            startCountDown();
            toast.success({
              title:data.message,
              duration:2000
            });
          } else {
            toast.fail({
              title:data.message,
              duration:2000
            });
          }

        },
        error : function(xhr, type) {
          toast.fail({
            title:type,
            duration:2000
          });
          toast.hide();
        }
      })
    }
  };

  function startCountDown() {
    // 倒计时开始
    if ($api.hasCls($api.dom('#count_down'),'aui-hide'))
    {
      $api.removeCls($api.dom('#count_down'),'aui-hide');
      $api.addCls($api.dom('#TencentCaptcha'),'aui-hide');
    }
    if (parseInt($api.html($api.dom('#count_down'))) == 1)
    {
      $api.html($api.dom('#count_down'),60);
      $api.addCls($api.dom('#count_down'),'aui-hide');
      $api.removeCls($api.dom('#TencentCaptcha'),'aui-hide');
    }else {
      $api.html($api.dom('#count_down'),parseInt($api.html($api.dom('#count_down'))) - 1);
      setTimeout("startCountDown()","1000");
    }
  }

  // 密码框更改
  function changePwd() {
    if ('password' == $api.attr($api.dom("#password"), 'type')) {
      $api.attr($api.dom("#password"), 'type', 'text');
    } else {
      $api.attr($api.dom("#password"), 'type', 'password');
    }
  }

  // 注册账号
  $api.addEvt($api.dom(".aui-btn-sm"), 'click', function() {
    if (!$api.val($api.dom('#mobile'))) {
      $api.dom('#mobile').focus();
      toast.fail({
        title:'请填写手机号',
        duration:2000
      });
      return false;
    }
    if (!$api.val($api.dom('#password'))) {
      $api.dom('#password').focus();
      toast.fail({
        title:'请填写密码',
        duration:2000
      });
      return false;
    }
    if (!register_dom.sms_code) {
      $api.dom('#sms_code').focus();
      toast.fail({
        title:'请填写短信验证码',
        duration:2000
      });
      return false;
    }
    toast.loading({
      title:"注册请求中",
      duration:2000
    },function(ret){
      console.log(ret);
    });
// 注册
    $.ajax({
      type : 'post',
      url : "{:url('ucenter/Foreign/register',['module'=>'mobile'])}",
      data : {
        mobile : register_dom.mobile,
        password : register_dom.password,
        sms_code:register_dom.sms_code,
        nickname : register_dom.nickname,
        code : '{$Request.param.code?:''}',
        password_confirm : register_dom.password,
      },
      dataType : 'json',
      timeout : 3000,
      success : function(data) {
        toast.hide();
        if (0 == data.code) {
          // 注册成功
          toast.success({
            title:data.message,
            duration:2000
          });
          location.href="{:url('mobile/Foreign/login')}";
        } else {
          toast.fail({
            title:data.message,
            duration:2000
          });
        }

      },
      error : function(xhr, type) {
        toast.hide();
        toast.fail({
          title:'网络错误',
          duration:2000
        });
      }
    })
  });
</script>
{/block}
{block name="footer"}
{/block}